<template>
  <view class="content">
    <view class="head">
      <u-navbar leftIcon="arrow-leftward" :placeholder='true' @leftClick="leftClick" title="我的訂單">
      </u-navbar>
    </view>
    <view class="search">
      <u-search :show-action="false" borderColor="#7A7DEE" bgColor="#FFFFFF" placeholder="請輸入訂單號查詢"
                v-model="data.order_sn" @search="search"></u-search>
      <view class="title-box u-flex" @click="filter">
        <text class="filter-title">篩選</text>
        <view class="p-box u-flex-col u-m-l-6">
          <text class="iconfont icon-shaixuan"></text>
        </view>
      </view>
    </view>
    <view class="nav">
      <scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
        <view class="tab-scroll_box">
          <!-- 选项卡类别列表 -->
          <view class="tab-scroll_item" v-for=" (item, index) in tabs" :key="index"
                :class="{ 'active': currentIndex == index }" @click="changeTab(index)">
            {{ item.name }}
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="dindan" v-for="(item, index) in myorderslist" :key="index">
      <view class="dindan-no">
        <view class="no-l">
          {{ item.order_sn }}
        </view>
        <view class="no-r">
          <view v-if="item.pay_status == 40">
            已退款
          </view>
          <view v-else-if="item.status != null && item.order_status == 0">
            {{ item.status | status }}
          </view>
          <view v-else-if="item.pay_status">
            {{ item.pay_status | pay_status }}
          </view>
          <view v-else>
            {{ item.order_status | orstatus }}
          </view>
        </view>
      </view>
      <view class="">
        <view class="goods-detail" v-for="(item, index) in item.goods" :key="index" @click="todetails(item)">
          <view class="detail-left">
            <view class="goods-left">
              <view class="goods-img">
                <image :src="getFirstImageLink(item.goods_images)" mode="aspectFit"></image>
              </view>
            </view>
            <view class="size">
              <view class="goods-title">{{ item.goods_name }}</view>
              <view class="center">
                <text> {{ item.attr_value }}</text>
                <text>x{{ item.goods_number }}</text>
              </view>
              <view class="bottom">
                <!-- 单价 -->
                <view class="goods-price">MOP {{ item.unit_price }}</view>
                <view class="detail-right">
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="jiage">
          共
          <view style="color:#645AED ;">{{ getTotalGoodsNumber(item.goods) }}</view>
          件，折後價格：
          <view
              style="color:#645AED ;">MOP
            {{ item.order_amount }}
          </view>
        </view>
        <view class="threebtn">
          <view class="btn" @click="refund(item)">
            申請退貨
          </view>
          <view class="btn" @click="cancel(item)">
            申請取消
          </view>
          <view class="btn green" @click="againorder(item)">
            再次下單
          </view>
        </view>
      </view>
    </view>


    <u-popup :show="show" mode="right" @close="closeWindows" @open="open">
      <view class="dialog">
        <view>
          <view class="title">訂單號</view>
          <view class="cbox">
            <u-search :showAction="false" placeholder="請輸入訂單號查詢" v-model="data.order_sn"></u-search>
          </view>
        </view>
        <view>
          <view class="title">日期</view>
          <!-- 日期选择器 -->
          <view class="cbox1">
            <view class="cbox-item" @click="toStart">
              <view class="time-item">
                {{ beginTime || '开始日期' }}
              </view>
            </view>
            <view class="lines" style="color:#BEBEBE ;">-</view>
            <view class="cbox-item" @click="toEnd">
              <view class="time-item">
                {{ endTime || '结束日期' }}
              </view>
            </view>
          </view>
        </view>
        <view>
          <view class="title">部門</view>
          <view class="cel_box" @click="isPart = !isPart">
            <!-- 下拉选择器 -->
            <view class="sel_ipt">
              <u--input placeholder="请选择部门" border="none" v-model="department" shape="circle"></u--input>
            </view>
            <!-- <image src="../../../static/images/unfold_gray.png" style="width: 30rpx;height: 30rpx;"></image> -->
            <u-icon name="arrow-down" size="28rpx"></u-icon>
            <view v-if="isPart" class="part_box">
              <scroll-view v-if="isPart" scroll-y="true" style="height: 300rpx;">
                <view class="part_item" :class="actIndex == index ? 'act_part' : ''"
                      v-for="(item, index) in memberlist" :key="index" @click="lookOne(item, index)">
                  {{ item.departmentname }}
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
        <view class="btn">
          <view class="btn1" @click="reset">
            重置
          </view>
          <view class="btn2" @click="submit">
            确定
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 申请退款弹窗 -->
    <u-popup :show="refundshow" :round="10" :closeable='true' mode="bottom" @close="closeWindows" @open="open">
      <view class="refund-dialog">
        <view class="title">
          申請退貨
        </view>
        <!-- <view class="text-box"> -->
        <view class="tuihuo">
					<textarea class="text-box" v-model="refundfrom.pay_note"
                    placeholder-style="padding:32rpx ;font-size: 28rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
                    maxlength='200' placeholder="請輸入退貨說明">
					</textarea>
          <view class="max-input">
            {{ refundfrom.pay_note.length }}/200
          </view>
        </view>
        <view class="btn" @click="returnsub">
          提交
        </view>
      </view>
    </u-popup>
    <u-datetime-picker ref="datetimePicker" :show="showTime" v-model="valueStart" mode="date" :formatter="formatter"
                       title="开始时间" @confirm="confirmStart" @cancel="cancelStart"></u-datetime-picker>
    <u-datetime-picker ref="datetimePicker" :show="showTime1" v-model="valueEnd" mode="date" :formatter="formatter"
                       title="结束时间" @confirm="confirmEnd" @cancel="cancelEnd"></u-datetime-picker>

  </view>
</template>
<script>
import {
  myorders,
  returngood,
  cancelgood,
  orderdetils,
  againcart
} from '@/network/api/user.js'
import {
  getmember,
} from '@/network/api/cart.js'

export default {
  data() {
    return {
      //退货表单
      refundfrom: {
        order_id: '',
        pay_note: ''
      },
      value2: "",
      refundshow: false,
      page: 1,
      choiceIndex: 0, //选择位置
      show: false,
      tabs: [{
        name: '全部',
      },
        {
          name: '未審批',
        },
        {
          name: '已審批',
        },
        {
          name: '全單取消',
        },
        {
          name: '申請修改',
        },
        {
          name: '已確認收貨'
        },
        {
          name: '申請退貨'
        },
      ],
      currentIndex: 0,
      contentScrollW: 0, // 导航区宽度
      scrollLeft: 0, // 横向滚动条位置
      fullHeight: "",
      keyword: "",
      valueStart: Number(new Date()),
      valueEnd: Number(new Date()),
      beginTime: '',
      endTime: '',
      showTime: false,
      showTime1: false,
      department: '', //部门
      isPart: false, //选择部门
      myorderslist: [],
      memberlist: [],
      actIndex: 0,
      data: {
        lang: 'cn',
        release: '',
        relend: '',
        order_sn: '',
        department: '',
        user_id: '',
        status: '',
        orstatus: '',
        sortAttr: '',
        sortMode: '',
        page: 1,
      },
      indextab: '',


    }
  },
  components: {},
  mounted() {
    var that = this;
    //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
    uni.getSystemInfo({
      success: function (res) {
        that.fullHeight = "height:" + res.windowHeight + "px";
      }
    });
    // 获取标题区域宽度，和每个子元素节点的宽度
    this.getScrollW()
  },
  onShow() {
    this.myorderslist = []
    this.data.page = 1
    this.page = 1
  if(this.indextab){
    this.changeTab(this.indextab)
  }else {
    this.getmyorders()
  }
    this.getmemberlist()
  },
  onLoad(e) {
    console.log(e, 'nihao');
    if (e.indextab) {
      this.indextab=e.indextab
    }
  },
  onReachBottom() {
    console.log('我到底了');
    // if (this.page < this.last_page) {
    // this.page += 1
    // this.getMycollect()
    // }
    this.data.page++
    this.getmyorders()
  },
  filters: {
    // 列表订单状态过滤器
    status(
        val,
    ) {
      switch (val) {
        case 0:
          return '未審批'
          break;
        case 1:
          return '已審批'
          break;
        case 2:
          return '申請修改'
          break;
        case 3:
          return '取消訂單'
          break;
        case 4:
          return '未通過'
          break;
      }
    },
    orstatus(
        val,
    ) {
      switch (val) {
        case '0':
          return '無需審批'
          break;
        case '1':
          return '未付款'
          break;
        case '2':
          return '已付款'
          break;
        case '3':
          return '已確認收貨'
          break;
        case '4':
          return '已發貨'
          break;
        case '5':
          return '已退貨'
          break;
        case '6':
          return '全單取消'
          break;
        case '7':
          return '要求退貨'
          break;
        case '8':
          return '已退貨'
          break;
      }
    },
    pay_status(val) {
      switch (val) {
        case '0':
          return '待付款'
          break;
        case '10':
          return '逾期'
          break;
        case '20':
          return '已全數支付'
          break;
        case '30':
          return '已部分支付'
          break;
      }
    }
  },
  methods: {
    getScrollW() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.tab-scroll').boundingClientRect(data => {
        // 拿到 scroll-view 组件宽度
        this.contentScrollW = data.width
      }).exec();
      query.selectAll('.tab-scroll_item').boundingClientRect(data => {
        let dataLen = data.length;
        for (let i = 0; i < dataLen; i++) {
          //  scroll-view 子元素组件距离左边栏的距离
          this.tabs[i].left = data[i].left;
          //  scroll-view 子元素组件宽度
          this.tabs[i].width = data[i].width
        }
      }).exec()
    },
    async againorder(item) {
      console.log(item);
      const from = item.goods.map(item => {
        return {
          rec_id: item.rec_id,
          order_id: item.order_id,
          goods_number: item.goods_number,
          goods_id: item.goods_id,
          goods_images: item.goods_images,
          goodnumber: item.goodnumber,
          numbering: item.numbering,
          goods_sn: item.goods_sn,
          specification_numbering: item.specification_numbering
        }
      })
      let data = {
        goods: from,
        lang: 'cn',
        order_sn: item.order_sn,
      }
      const res = await againcart(data)
      if (res.data.code == 1) {
        uni.showToast({
          title: '加入購物車成功',
          icon: 'success',
          duration: 2000
        })
      }
    },
    getTotalGoodsNumber(item) {
      // 计算商品总数量
      return item.reduce((total, goods) => total + goods.goods_number, 0);
    },
    async getmemberlist() {
      let company_id = uni.getStorageSync('user').userinfo.company_id
      const res = await getmember(company_id)
      this.memberlist = res.data.department
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    toStart() {
      this.showTime = true
      this.showTime1 = false
    },
    toEnd() {
      this.showTime1 = true
      this.showTime = false
    },
    confirmStart(e) {
      let date = new Date(e.value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM; //月补0
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d; //天补0
      this.beginTime = y + '-' + MM + '-' + d; //年月日
      this.data.release = this.beginTime
      this.showTime = false
    },
    cancelStart(e) {
      this.showTime = false
    },
    confirmEnd(e) {
      let date = new Date(e.value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM; //月补0
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d; //天补0
      this.endTime = y + '-' + MM + '-' + d; //年月日
      this.data.relend = this.endTime
      this.showTime1 = false
    },
    cancelEnd(e) {
      this.showTime1 = false
    },
    lookOne(item, index) {
      this.department = item.departmentname
      this.data.department = item.department_id
      this.actIndex = index
    },
    async cancel(item) {
      let data = {
        order_id: item.order_id,
        cancel_note: '',
      }
      uni.showLoading({
        title: "提交中，请稍后...",
        mask: true,
      });
      const res = await cancelgood(data)
      if (res.data.code == 1) {
        uni.hideLoading()
        uni.showToast({
          title: "提交申请成功，请耐心等待",
          icon: 'success',
        });
      } else {
        uni.hideLoading()
      }

    },
    // 退货提交
    async returnsub() {
      uni.showLoading({
        title: "提交中，请稍后...",
        mask: true,
      });
      const res = await returngood(this.refundfrom)
      if (res.data.code == 1) {
        uni.hideLoading()
        uni.showToast({
          title: "提交申请成功，请耐心等待",
          icon: 'success',
        });
        this.refundfrom.pay_note = ''
        this.refundshow = false
      } else {
        uni.hideLoading()
        this.refundfrom.pay_note = ''
        this.refundshow = false
      }
      this.getmyorders()

    },
    // 申请退款
    refund(item) {
      console.log(item);
      this.refundshow = true
      this.refundfrom.order_id = item.order_id
    },
    async changeTab(index) {
      this.currentIndex = index
      this.indextab=index
      this.scrollLeft = 0;
      for (let i = 0; i < index - 1; i++) {
        this.scrollLeft += this.tabs[i].width
      }
      ;
      console.log(this.currentIndex, '123');
      if (this.currentIndex == 0) {
        this.data.status = ''
        this.data.orstatus = ''
      }
      if (this.currentIndex == 1) {
        this.data.status = 0
        this.data.orstatus = ''

      }
      if (this.currentIndex == 2) {
        this.data.status = 1
        this.data.orstatus = ''

      }
      if (this.currentIndex == 3) {
        this.data.orstatus = 6
        this.data.status = ''

      }
      if (this.currentIndex == 4) {
        this.data.status = 2
        this.data.orstatus = ''
      }
      if (this.currentIndex == 5) {
        this.data.orstatus = 3
        this.data.status = ''
      }
      if (this.currentIndex == 6) {
        this.data.orstatus = 7
        this.data.status = ''
      }
      this.myorderslist = []
      this.data.page = 1
      await this.getmyorders()
    },
    async getmyorders() {

      // 转圈加载中
      uni.showLoading({
        title: '加载中'
      })
      const res = await myorders(this.data)
      uni.hideLoading()
      const neworderlist = res.data.order
      if (neworderlist.length == 0) {
        uni.showToast({
          title: '暫無數據',
          icon: 'none',
          duration: 2000
        })
      }
      this.myorderslist = [...this.myorderslist, ...neworderlist]

    },
    todetails(item) {
      console.log(item.order_id);
      uni.navigateTo({
        url: `/pages/mine/order/details?orderid=${item.order_id}`
      })
    },
    closeWindows() {
      this.show = false,
          this.refundshow = false
    },
    open() {

    },
    search() {
      this.myorderslist = []
      this.data.page = 1
      this.getmyorders()
    },
    reset() {
      this.data.order_sn = '',
          this.data.release = '',
          this.data.relend = '',
          this.data.department = '',
          this.department = '',
          this.endTime = '',
          this.beginTime = ''
      this.myorderslist = []
      this.data.page = 1
      this.getmyorders()
      this.show = false
    },
    submit() {
      this.myorderslist = []
      this.data.page = 1
      this.getmyorders()
      this.show = false
    },
    filter() {
      this.show = true
    },
    leftClick() {
      uni.switchTab({
        url: '/pages/mine/index'
      })
    }
  }
}
</script>

<style lang="scss">
@import "@/static/iconfont/iconfont.css";

page {
  background: #f5f6f9;
}

.bg {
  background-color: white;
}

.refund-dialog {
  height: 900rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .btn {
    position: fixed;
    bottom: 16rpx;
    width: 686rpx;
    height: 80rpx;
    background: #645AED;
    border-radius: 30rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
  }

  .title {

    margin-top: 44rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
  }

  .tuihuo {
    position: relative;
    width: 686rpx;
    min-height: 316rpx;
    margin: 60rpx auto;

    .text-box {
      width: 686rpx;
      height: 316rpx;
      border-radius: 20rpx;
      background: #F7F7F7;
    }

    .max-input {
      position: absolute;
      bottom: 20rpx;
      right: 32rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }


}

.content {
  .search {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 32rpx;

    .title-box {
      display: flex;
      margin-left: 22rpx;
      align-items: center;
    }
  }

  .nav {
    background-color: white;
    border-top: 1rpx solid #f2f2f2;
    z-index: 99;
    width: 100%;
    align-items: center;
    height: 88rpx;
    line-height: 88rpx;

    .tab-scroll {
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;
      padding-left: 30rpx;
      padding-right: 30rpx;

      .tab-scroll_box {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        .tab-scroll_item {
          margin-right: 35rpx;
          flex-shrink: 0;
          display: flex;
          font-size: 28rpx;
        }
      }
    }
  }

  .active {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1F1F1F;
    border-bottom: 5rpx solid #645AED;
  }

  /* 隐藏滚动条，但依旧具备可以滚动的功能 */
  /deep/ .uni-scroll-view::-webkit-scrollbar {
    display: none
  }

  // .nav {
  // 	background-color: white;
  // 	height: 88rpx;
  // 	line-height: 88rpx;
  // 	display: flex;
  // 	justify-content: space-around;
  // 	font-size: 28rpx;
  // 	font-family: PingFang SC;
  // 	font-weight: 500;
  // 	color: #666666;
  // }

  // .active {
  // 	font-size: 28rpx;
  // 	font-family: PingFang SC;
  // 	font-weight: bold;
  // 	color: #1F1F1F;
  // 	border-bottom: 5rpx solid #645AED;
  // }

  .jiage {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 22rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .threebtn {
    margin-top: 40rpx;
    display: flex;
    justify-content: flex-end;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;

    .btn {
      margin-left: 20rpx;
      text-align: center;
      line-height: 60rpx;
      width: 170rpx;
      height: 60rpx;
      border: 1rpx solid #CBCBCB;
      border-radius: 20rpx;
    }

    .green {

      border: 1rpx solid #645AED;
      color: #645AED;
    }
  }


  .dindan {
    margin-top: 16rpx;
    background: white;
    padding: 32rpx;

    .dindan-no {
      height: 84rpx;
      border-bottom: 1rpx solid #F1F1F1;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;

      .no-l {
        color: #3A3A3A;
      }

      .no-r {
        color: #645AED
      }
    }

    .goods {
      line-height: 80rpx;
      background-color: #FFFFFF;

      &-detail {
        display: flex;
        padding: 16rpx 0;
        // margin: 0 32rpx;
        background-color: #fff;
        justify-content: space-between;
        align-items: center;

        .detail-left {
          flex: 1;
          display: flex;

          .goods-left {
            display: flex;
            align-items: center;

            .goods-img {
              width: 180rpx;
              height: 180rpx;
              background: #FFFFFF;
              border: 1rpx solid #DEDEDE;
              border-radius: 30rpx;
              display: flex;
              justify-content: center;
              align-items: center;

              image {
                max-width: 90%;
                max-height: 90%;
              }
            }
          }
        }

        .size {
          flex: 1;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          margin-left: 30rpx;

          .center {
            justify-content: space-between;
            display: flex;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-top: 8rpx;
          }

          .bottom {
            margin-top: 22rpx;
            display: flex;
            align-items: center;
            justify-content: space-between
          }

          .goods-title {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .goods-price {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #4949C3;
          }
        }

        .detail-right {
          .stepper {
            display: flex;
            // align-items: center;
            vertical-align: middle;

            .stepper-value {
              margin: 0 20rpx;
              font-size: 24rpx;
              line-height: 43rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            .stepper-btn {
              image {
                width: 44rpx;
                height: 44rpx;
              }
            }
          }

          text {
            width: 50rpx;
            line-height: 50rpx;
            text-align: center;
            display: inline-block;
            background-color: #F7F7F7;
            margin-right: 10rpx;
          }

          .add {
            color: #FA4305;
            border-radius: 10rpx 30rpx 30rpx 10rpx;
            margin-right: 20rpx;
          }

          .subtract {
            border-radius: 30rpx 10rpx 10rpx 30rpx;
          }
        }
      }
    }

  }

  .main {
    margin-top: 16rpx;
    padding: 0 32rpx;

    .order-item {
      padding: 32rpx 0;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      border-bottom: 1rpx solid #DEDEDE;;
    }

    .order-item:last-child {
      border-bottom: none;
    }
  }

  .dialog {
    // padding: 0 31rpx;
    width: 640rpx;

    .title {
      margin: 0 31rpx;
      margin-top: 80rpx;
      margin-bottom: 31rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }

    .cbox {
      margin: 0 31rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .citem {
        margin-bottom: 32rpx;
        text-align: center;
        align-items: center;
        width: 185rpx;
        height: 54rpx;
        line-height: 54rpx;
        background: #F5F6F9;
        border-radius: 16rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      .active {
        border: 1px solid #645AED;
        background: #E5E7FA;
        color: #645AED;
      }
    }

    .cbox1 {
      margin: 0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .lines {
        padding: 10rpx;
      }

      .cbox-item {
        .time-item {
          width: 220rpx;
          background-color: #f2f2f2;
          height: 64rpx;
          border-radius: 32rpx;
          text-align: center;
          line-height: 64rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }

      }
    }

    .cel_box {
      margin-left: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 500rpx;
      height: 60rpx;
      border-radius: 30rpx;
      background-color: #f2f2f2;
      padding: 0 20rpx;
      position: relative;
    }

    .part_box {
      position: absolute;
      left: 20rpx;
      top: 70rpx;
      width: 400rpx;
      height: 300rpx;
      box-shadow: 0rpx -3rpx 6rpx 0rpx rgba(0, 0, 0, 0.40);

      .part_item,
      .act_part {
        width: 320rpx;
        height: 60rpx;
        font-size: 24rpx;
        color: #000;
        line-height: 60rpx;
        padding: 0 40rpx;
      }

      .act_part {
        background-color: #f2f2f2;
      }
    }


    .btn {
      position: absolute;
      left: 31rpx;
      right: 31rpx;
      bottom: 15rpx;
      display: flex;
      justify-content: space-between;

      .btn1 {
        width: 280rpx;
        height: 68rpx;
        text-align: center;
        line-height: 68rpx;
        border: 1px solid #CBCBCB;
        opacity: 1;
        border-radius: 24rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #3A3A3A;
      }

      .btn2 {
        width: 280rpx;
        height: 68rpx;
        text-align: center;
        background: #645AED;
        line-height: 68rpx;
        border: 1px solid #CBCBCB;
        opacity: 1;
        border-radius: 24rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }

}
</style>
